<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>下单</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/main.css" />
<!--[if lt IE 9]>
<script src="../js/html5.js "></script >
<script src="../js/respond.min.js "></script >
<![endif]-->
<script src="../js/jquery.js"> </script>
<script src="../js/base.js"></script>
<script src="../js/common.js"></script>
</head>

<body>
<section class="main sedormian">
	<header>
    	<span><</span>装车＋私导
    </header>
    <ul class="list">
    	<li>
        	<img class="tip tipleft" src="../images/personblack.png">
            请选择城市
        	<img class="tip tipright tabsection" data-tab="city" src="../images/arrowtipright.png">
        </li>
    	<li>
        	<img class="tip tipleft" src="../images/personblack.png">
            请选择车型
        	<img class="tip tipright tabsection" data-tab="car" src="../images/arrowtipright.png">
        </li>
    	<li>
        	<img class="tip tipleft" src="../images/personblack.png">
            请选择导游
        	<img class="tip tipright tabsection" data-tab="tour" src="../images/arrowtipright.png">
        </li>
    	<li>
        	<img class="tip tipleft" src="../images/personblack.png">
            请选择日前
        	<img class="tip tipright" src="../images/arrowtipright.png">
        </li>
    	<li>
        	<img class="tip tipleft" src="../images/personblack.png">
            请选择您想去的景点
        	<img class="tip tipright tabsection" data-tab="around" src="../images/arrowtipright.png">
        </li>
    	<li>
        	<img class="tip tipleft" src="../images/personblack.png">
            愿意拼车  享受折扣
            <span class="tip switch tipright"></span>
        </li>
    </ul>
    <form>
    	<h4>旅途中的个性化服务</h4>
        <div class="textareabox">
            <textarea placeholder="112"></textarea>
        </div>
    </form>
    <div class="btn">
    	<a class="on" href="javascript:void(0);">旅游启程</a>
    	<a href="javascript:void(0);">随便看看</a>
    </div>
</section>  

<section class="sedorcity city">
	<header class="white">
    	<span class="tabsection" data-tab="main"><</span>
        <strong>国内</strong><strong class="on">省内</strong>
    </header>
    <div class="pubsear grey">
    	<form>
              <input type="image" class="btnsear" src="../images/search.png">
              <input  type="text"  class="inpsear" placeholder="请输入商品名称和品牌名称">
        </form>
    </div>
    <div class="import">
    	<a href="javascript:void(0);">北京</a>
    	<a href="javascript:void(0);">北京</a>
    	<a href="javascript:void(0);">北京</a>
    	<a href="javascript:void(0);">北京</a>
    	<a href="javascript:void(0);">北京</a>
    	<a href="javascript:void(0);">北京</a>
    	<a href="javascript:void(0);">北京</a>
    </div>
    <ul>
    	<h4>a</h4>
        <li>北京</li>
        <li>北京</li>
        <li>北京</li>
    </ul>
</section>

<section class="sedorcar car">
	<header class="white">
    	<span class="tabsection" data-tab="main"><</span>车型选择
        <a class="btn" href="javascript:void(0);">分类</a>
    </header>
    <ul>
    	<li>
        	<img src="../images/personblack.png">
            <dl>
            	<dt>
                	<h4>奥迪</h4>
                    <p class="star">五星级</p>
                    <p class="tip"><span>2014年</span><span>4万公里</span></p>
                </dt>
                <dl>
                	<p><span class="status">车＋导</span></p>
                    <p><span class="price">¥<strong>600</strong></span>/起</p>
                    <p class="comment">74%好评</p>
                </dl>
            </dl>
        </li>
    	<li>
        	<img src="../images/personblack.png">
            <dl>
            	<dt>
                	<h4>奥迪</h4>
                    <p class="star">五星级</p>
                    <p class="tip"><span>2014年</span><span>4万公里</span></p>
                </dt>
                <dl>
                	<p><span class="status">车＋导</span></p>
                    <p><span class="price">¥<strong>600</strong></span>/起</p>
                    <p class="comment">74%好评</p>
                </dl>
            </dl>
        </li>
    	<li>
        	<img src="../images/personblack.png">
            <dl>
            	<dt>
                	<h4>奥迪</h4>
                    <p class="star">五星级</p>
                    <p class="tip"><span>2014年</span><span>4万公里</span></p>
                </dt>
                <dl>
                	<p><span class="status">车＋导</span></p>
                    <p><span class="price">¥<strong>600</strong></span>/起</p>
                    <p class="comment">74%好评</p>
                </dl>
            </dl>
        </li>
    </ul>
</section>
<section class="sedortour tour">
	<header class="white">
    	<span class="tabsection" data-tab="main"><</span>导游列表
        <a class="btn" href="javascript:void(0);">筛选</a>
    </header>
    <ul>
    	<li class="tabsection" data-tab="language">
        	<img class="show" src="../images/tour.png">
            <div class="explain">
            	<p><span class="name">张三</span><span class="sex">男</span><span class="grade">五级</span></p>
                <p><span class="language">中午</span>|<span class="year">10年</span></p>
                <img class="headimg" src="../images/tour.png">
                <p class="price"><strong>¥1250</strong>/天</p>
            </div>
            <p class="text">张三是一个好的导游，张三是一个好的导游，张三是一个好的导游，张三是一个好的导游。</p>
        </li> 
    	<li class="tabsection" data-tab="language">
        	<img class="show" src="../images/tour.png">
            <div class="explain">
            	<p><span class="name">张三</span><span class="sex">男</span><span class="grade">五级</span></p>
                <p><span class="language">中午</span>|<span class="year">10年</span></p>
                <img class="headimg" src="../images/tour.png">
                <p class="price"><strong>¥1250</strong>/天</p>
            </div>
            <p class="text">张三是一个好的导游，张三是一个好的导游，张三是一个好的导游，张三是一个好的导游。</p>
        </li> 
    	<li class="tabsection" data-tab="language">
        	<img class="show" src="../images/tour.png">
            <div class="explain">
            	<p><span class="name">张三</span><span class="sex">男</span><span class="grade">五级</span></p>
                <p><span class="language">中午</span>|<span class="year">10年</span></p>
                <img class="headimg" src="../images/tour.png">
                <p class="price"><strong>¥1250</strong>/天</p>
            </div>
            <p class="text">张三是一个好的导游，张三是一个好的导游，张三是一个好的导游，张三是一个好的导游。</p>
        </li>    	
    </ul>
</section>

<section class="sedorlanguage language" >
	<header class="white">
    	<span class="tabsection" data-tab="tour"><</span>语种
    </header>
	<ul>
    	<li>汉语<span><strong>¥600</strong>起</span></li>
    	<li>汉语<span><strong>¥600</strong>起</span></li>
    	<li>汉语<span><strong>¥600</strong>起</span></li>
    </ul>
</section>

<section class="sedoraround around">
	<header class="white">
    	<span class="tabsection" data-tab="main"><</span>周边景色
        <a class="btn" href="javascript:void(0);">筛选</a>
    </header>
    <ul>
    	<li class="tabsection" data-tab="aroundshow">
        	<img class="bg" src="../images/tour.png">
        	<h4>晋阳湖</h4>
            <p>晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好</p>
        </li>
    	<li class="tabsection" data-tab="aroundshow">
        	<img class="bg" src="../images/tour.png">
        	<h4>晋阳湖</h4>
            <p>晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好</p>
        </li>
    	<li class="tabsection" data-tab="aroundshow">
        	<img class="bg" src="../images/tour.png">
        	<h4>晋阳湖</h4>
            <p>晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好</p>
        </li>
    </ul>
</section>


<section class="sedoraroundshow aroundshow">
	<header class="white">
    	<span class="tabsection" data-tab="around"><</span>周边景色
        <a class="btn" href="javascript:void(0);">筛选</a>
    </header>
	<ul class="detailsturn" id="turn">
    	<li><img src="../images/logo.png" alt="1">1</li>
    	<li><img src="../images/logo.png" alt="2"></li>
    	<li><img src="../images/logo.png" alt="3"></li>
    	<li><img src="../images/logo.png" alt="4"></li>
    	<li class="on"><img src="../images/logo.png" alt="5"></li>
        <span class="num"><span>1</span>/5</span>
    </ul>
	<div class="text">
        <h4>晋阳湖<span>bbq</span><span>bbq</span></h4>
        <p>晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好晋阳湖风景好</p>
	</div>
    <div class="btnbox">
    	<a href="javascript:void(0);">选择该景点</a>
    </div>
</section>
     
<script>
	$(".switch").click(function(){
		$(this).toggleClass("on");
	})
	
	function turnimgmove(a){
		turnimgtimestop();
		if(a){
			turnimg();
		}
		else{
			turnimgreduce();	
		}
		timeturn = setTimeout("turnimgtime()",4000);;
	}
	$(".detailsturn").height($(".detailsturn").width());
	function turnimg(){
		
		var $ul = $(".detailsturn");
		var $li = $ul.find("li");
		var $span = $(".detailsturn .num span");
		var width = $ul.width();
		$ul.height(width);
		var num = $ul.find(".on").index();
		var numoldup = (num-1+5)%5;
		var numon = (num+1+5)%5;
		var numnext = (num+2+5)%5;
		var $numoldup = $li.eq(numoldup);
		var $liup = $li.eq(num);
		var $lion = $li.eq(numon);
		var $linext = $li.eq(numnext);
		$numoldup.removeClass("up");
		$liup.removeClass("on").addClass("up");
		$lion.removeClass("next").addClass("on");
		$linext.addClass("next"); 
		$span.html((numon+1));
	}
	function turnimgreduce(){
		
		var $ul = $(".detailsturn");
		var $li = $ul.find("li");
		var $span = $(".detailsturn .num span");
		var width = $ul.width();
		$ul.height(width);
		var num = $ul.find(".on").index();
		var numup = (num-2+5)%5;
		var numoldup = (num-1+5)%5;
		var numnext = (num+1+5)%5;
		var $liupold = $li.eq(numoldup);
		var $liup = $li.eq(numup);
		var $lion = $li.eq(num);
		var $linext = $li.eq(numnext);
		$liup.addClass("up");
		$liupold.removeClass("up").addClass("on");
		$lion.removeClass("on").addClass("next");
		$linext.removeClass("next"); 
		$span.html((numoldup+1));
	}
	var timeturn;
	var turnimgtime = function turnimgtime(){
		turnimg();
		timeturn = setTimeout("turnimgtime()",4000);
	}
	var turnimgtimestop = function turnimgtimestop() {
		clearTimeout(timeturn);
		return ;
	}
	turnimgtime();
    (function (){

        var LSwiperMaker = function(o){ 
 
            var that = this;
            this.config = o;
            this.control = false;
            this.sPos = {};
            this.mPos = {};
            this.dire;
     
            // this.config.bind.addEventListener('touchstart', function(){ return that.start(); } ,false);
            // 这样不对的，event对象只在事件发生的过程中才有效;
            this.config.bind.addEventListener('touchstart', function(e){ return that.start(e); } ,false);
            this.config.bind.addEventListener('touchmove', function(e){ return that.move(e); } ,false);
            this.config.bind.addEventListener('touchend', function(e){ return that.end(e); } ,false);
 
        }
 
        LSwiperMaker.prototype.start = function(e){
             
             var point = e.touches ? e.touches[0] : e;
             this.sPos.x = point.screenX;
             this.sPos.y = point.screenY;
 
        }
        LSwiperMaker.prototype.move = function(e){  
 
            var point = e.touches ? e.touches[0] : e;
            this.control = true;
            this.mPos.x = point.screenX;
            this.mPos.y = point.screenY;
 
        }
 
        LSwiperMaker.prototype.end = function(e){
 

            this.config.dire_h  && (!this.control ? this.dire = null : this.mPos.x > this.sPos.x ? this.dire = 'R' : this.dire = 'L')
            this.config.dire_h  || (!this.control ? this.dire = null : this.mPos.y > this.sPos.y ? this.dire = 'D' : this.dire = 'U')

			
			
			this.control = false;
            this.config.backfn(this);
 
        }
 
        window.LSwiperMaker = LSwiperMaker;
        document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);// 禁止微信touchmove冲突
 
    }())
 
    var a = new LSwiperMaker({
            bind:document.getElementById("turn"),  // 绑定的DOM对象
            dire_h:true,     //true 判断左右， false 判断上下
               //回调事件
			backfn:function(o){    //回调事件
			
			//console.log(o.dire=='R');
			turnimgmove(o.dire=='L');
			}
	
    })
</script>


</body>
</html>
